<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  body{
    margin: 0;
  }
  /* 知道宽高 */  
  /* .center{ 
  width: 200px;
  height: 200px;
  background: black;
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
} */
  /*不知道宽高 */
  .container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content:center;   /* 定义了在主轴的排列方式 */
    align-items:center;        /* 定义项目在交叉轴上如何对齐。 */
  }
  .center{
    background: black;
    margin: auto;
  }
  .nth p:nth-child(2){
    color: red
  }
</style>

<body>
  <!-- 垂直水平居中 -->
  <div class="container">
    <div class="center">
        法拉收到货发怒
    </div>
    <div class="nth">
      <p>耗费</p>
      <p>耗费</p>
      <p>耗费</p>
      <p>耗费</p>
      <p>耗费</p>
      <p>耗费</p>
      <p>耗费</p>
      <p>耗费</p>
      <p>耗费</p>
      <p>耗费</p>
      <p>耗费</p>
      <p>耗费</p>
      <p>耗费</p>
    </div>
  </div>

</body>

</html>